<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Lemon
  Date: 2020/6/11
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"  media="all">
    <style type="text/css">
        .layui-form-item{margin-top: -1px; margin-left:60px; font-size: 16px;}
        .layui-input{border: none;}
    </style>
</head>
<body>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">服务详情</li>
        <li>转交记录</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="myform">
                <div style="width: 99.8%;height:35px;line-height:35px;border: 1px #f1f1f1 solid;background-color: #f5f5f5;" >
                    <span style="margin-left: 28px;">基本信息</span>
                </div>
                <div class="layui-form-item" style="margin-top: 15px;">
                    <label class="layui-form-label">创建人：</label>
                    <div class="layui-input-inline" style="width: 250px">
                        <input type="text" class="layui-input" name="creater_name" readonly="readonly" value="${serviceSelf.creater_name}" />
                    </div>
                    <label class="layui-form-label" style="margin-left: 150px;">处理人：</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <input type="text" class="layui-input" name="user_account" readonly="readonly" value="${serviceHandler.user_account}" />
                    </div>
                </div>
                <div style="width: 99.8%;height:35px;line-height:35px;border: 1px #f1f1f1 solid;background-color: #f5f5f5;" >
                    <span style="margin-left: 28px;">服务信息</span>
                </div>
                <div class="layui-form-item" style="margin-top: 15px;">
                    <label class="layui-form-label">客户名称：</label>
                    <div class="layui-input-inline" style="width: 320px">
                        <input type="text" class="layui-input" name="customerName" readonly="readonly" value="${serviceCustomer_id.customer_name}" />
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务主题：</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <input type="text" class="layui-input" name="general" value="${serviceSelf.general}" readonly="readonly" />
                    </div>
                    <label class="layui-form-label" style="margin-left: 150px;">服务时间：</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <input type="text" name="create_date" class="layui-input" value="<fmt:formatDate value="${serviceSelf.create_date}" pattern="yyyy-MM-dd HH:mm:ss"/>" readonly="readonly"/>
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务类型：</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <input type="text" name="type" class="layui-input" value="${serviceSelf.type}" readonly="readonly"  />
                    </div>
                    <label class="layui-form-label" style="margin-left: 150px;">紧急程度：</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <input type="text" name="emergency" class="layui-input" value="${serviceSelf.emergency}" readonly="readonly" />
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话：</label>
                    <div class="layui-input-inline" style="width: 250px;" >
                        <input type="text" name="phone_number" class="layui-input" value="${serviceSelf.phone_number}" readonly="readonly" />
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务内容：</label>
                    <div class="layui-input-block" style="width: 700px;">
                        <div name="request" style="padding: 9px 15px;">${serviceSelf.request}</div>
                    </div>
                </div>
                <div style="width: 99.8%;height:35px;line-height:35px;border: 1px #f1f1f1 solid;background-color: #f5f5f5;" >
                    <span style="margin-left: 28px;">处理信息</span>
                </div>
                <div class="layui-form-item" style="margin-top: 15px;">
                    <label class="layui-form-label">处理时间：</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <input type="text" name="handler_time" class="layui-input" readonly="readonly" value="<fmt:formatDate value="${serviceSelf.handler_time}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">处理过程：</label>
                    <div class="layui-input-block" style="width: 700px;">
                        <div name="handle_content" style="padding: 9px 15px;">${serviceSelf.handle_content}</div>
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">处理结果：</label>
                    <div class="layui-input-block" style="width: 700px;">
                        <input type="text" name="handle_result" class="layui-input" readonly="readonly" value="${serviceSelf.handle_result}" />
                    </div>
                </div>
                <hr style="height:2px;">
                <div class="layui-form-item">
                    <label class="layui-form-label" >服务状态：</label>
                    <div class="layui-input-inline" style="width: 250px">
                        <input type="text" name="status" class="layui-input" value="${serviceSelf.status}" readonly="readonly" />
                    </div>
                </div>
                <hr>
                <div class="layui-form-item" style="margin-bottom: 35px;">
                    <label class="layui-form-label" style="width:100px;margin-left:-21px;">客户满意度：</label>
                    <div class="layui-input-inline" style="width: 320px">
                        <input type="text" name="degree" class="layui-input" value="${serviceSelf.degree}" readonly="readonly" />
                    </div>
                </div>
            </form>
        </div>
        <div id="tabDiv" class="layui-tab-item">
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element','jquery','layer','form','laydate','layedit'], function() {
        var $ = layui.jquery
            ,element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$

    });

    /**
     * [获取URL中的参数名及参数值的集合]
     * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
     * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合]
     * @return {[string]}       [参数集合]
     */
    function GetRequest(urlStr) {
        if (typeof urlStr == "undefined") {
            var url = decodeURI(location.search); //获取url中"?"符后的字符串
        } else {
            var url = "?" + urlStr.split("?")[1];
        }
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    //从url中获取参数
    var service = GetRequest();

    console.log(service['id'])
    var serviceId = service['id'];

    findServiceTransfersByServiceId(serviceId);

    function findServiceTransfersByServiceId(serviceId){
        $.ajax({
            url : '/service/findServiceTransfersByServiceId?id='+serviceId,
            async : false,
            type : 'POST',
            data : {
                'serviceId' : serviceId
            },
            dataType : 'json',

            success : function(data){
                console.log(data);
                $("#tabDiv").html("");
                var list = data.data;
                var content = '';
                if(list.length == 0){
                    content = "<div align='center' style='color:#999999;'>暂无历史转移记录</div>";
                }
                for(i=0 ; i < list.length; i++){
                    content += "<ul class='layui-timeline'>";
                    content += "  <li class='layui-timeline-item'>";
                    content += "      <i class='layui-icon layui-timeline-axis'>&#xe63f;</i>";
                    content += "      <div class='layui-timeline-content layui-text'>";
                    content += "          <h3 class='layui-timeline-title'>"+list[i].time+"</h3>";
                    content += "          <p>";
                    content += "              原处理人：" + list[i].oldManagerAccount + "<br/>";
                    content += "              现处理人：" + list[i].newManagerAccount + "<br/>";
                    content += "              转交原因：" + list[i].reason;
                    content += "          </p>";
                    content += "      </div>";
                    content += "  </li>";
                    content += "</ul>";
                }
                $("#tabDiv").html(content);
            }
        });
    }
</script>
</body>
</html>